<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<link rel="stylesheet" href="./css/bootstrap.css">
		<link rel="stylesheet" href="./css/css/bootstrap-icons.min.css">
		<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
		<style>
			[type=checkbox] {
				width: 30px;
				height: 30px;
			}

			[type=number] {
				width: 40px;
				height: 30px;
			}

			.form-inline button {
				width: 30px;
			}

			tbody img {
				width: 150px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<nav class="navbar bg-white sticky-top">
			<div>
				<a href="./Home.html" class="text-dark text-decoration-none"><img src="./img/Logo.png" alt="">首页</a>
			</div>
			<div>
				<p class="d-inline mr-5">没有账户？ <a href="./Sign.html">去注册</a></p>

			</div>
		</nav>

		<div class="container" id="app">
			<div class="card p-5">
				<div class="card-header bg-transparent d-flex justify-content-between">
					<h4>
						购物车
					</h4>
					<p class="text-info font-weight-bold">
						会员可享受免费配送服务。
					</p>
				</div>
				<table class="table-borderless table text-center">
					<thead>
						<tr>
							<th>
								<label for="all">全选</label>
								<input type="checkbox" id="all" class="all" v-model="all"
									style="width: 20px;height: 20px;">
							</th>
							<th>
								商品信息
							</th>
							<th>
								尺码
							</th>
							<th>
								单价
							</th>
							<th>
								数量
							</th>
							<th>
								金额
							</th>
							<th>
								操作
							</th>
						</tr>
					</thead>
					<tbody>


					</tbody>
					<tfoot class="border-top">
						<tr>
							<td>
								<a href="#" class="text-dark text-decoration-none">
									清空购物车
								</a>
							</td>
							<td colspan="11" class="text-right">
								<span class="mx-3">已选中<span
										style="font-size:30px;color:orange;font-weight:bold;" id="num">0</span>件</span>
								<span class="mx-3">合计<span
										style="font-size:30px;color:orange;font-weight:bold;" id="money">0</span>元</span>
								<button class="btn btn-outline-primary rounded">
									结算
								</button>
							</td>

						</tr>
					</tfoot>
				</table>
			</div>
		</div>
		<script>
			//创建商品的信息对象
			const goods = {
				'good1': ['./goods/Snipaste_2023-06-08_14-26-46.png', 'Nike Dunk Low Retro SE', 699],
				'good2': ['./goods/Snipaste_2023-06-08_14-27-21.png', 'Nike Zoom Fly 5', 699],
				'good3': ['./goods/Snipaste_2023-06-08_14-27-51.png', 'Nike Air Zoom G.T. Cut 2 EP', 1099],
				'good4': ['./goods/Snipaste_2023-06-08_14-30-47.png', 'Air Jordan XXXVII Low PF', 899],
				'good5': ['./goods/Snipaste_2023-06-08_14-31-21.png', 'Air Jordan Legacy 312 Low', 999]
			}
			
			//创建渲染总金额和数量的函数
			function render(){
				//获取总金额和数量
				const num = document.querySelector('#num')
				const money = document.querySelector('#money')
				
				//总数量为已选中的checked的数量并渲染
				num.innerText = document.querySelectorAll('tbody [type=checkbox]:checked').length
				
				//初始化总金额
				let mo = 0
				//获取已选中的复选框的tr
				const arr = document.querySelectorAll('tbody [type=checkbox]:checked')
				for(let i = 0 ; i < arr.length ; i++){
					//将所有已选中的复选框的总金额叠加，得到全部金额
					mo += parseInt(arr[i].parentNode.parentNode.children[5].innerText)
				}
				//渲染总金额
				money.innerText = mo
			}
			
			//创建一个空数组，并将信息处理到商品信息对象中
			const arr = []
			for (let i = 0; i < localStorage.length; i++) {
				//处理数据，将尺码加入当信息中
				goods[`${localStorage.key(i)}`].push(JSON.parse(localStorage.getItem(localStorage.key(i))).size)
				arr.push(goods[`${localStorage.key(i)}`])
				
				//处理好的信息开始渲染
				const tr = document.createElement('tr')
				tr.innerHTML = `
					<td>
						<input type="checkbox" class="my-auto">
					</td>
					<td>
						<div class="d-flex">
							<img src="${arr[i][0]}" class="mr-3" alt="">
							<h6>
								${arr[i][1]}
							</h6>
						</div>
					</td>
					<td>
						${arr[i][3]}
					</td>
					<td>
						${arr[i][2]}
					</td>
					<td class="form-inline justify-content-center">
						<button class="input-group-prepend">-</button><input type="number" value="1" min="1"><button class="input-group-append">+</button>
					</td>
					<td class="all_money">
						${arr[i][2]}
					</td>
					<td>
						<a href="#" class="text-danger delete" data-id=good${i+1}>删除</a>
					</td>
					`
				//渲染
				document.querySelector('tbody').append(tr)

			}
			//给所有的复选框添加判断，如果所有商品的复选框全选中，则全选框勾选
			const sel = document.querySelectorAll('tbody [type=checkbox]')
			for(let i = 0 ; i < sel.length ; i++){
				sel[i].addEventListener('click',function(e){
					//创建一个空数组，存放复选框的已选中值
					const arr = []
					for(let i = 0 ; i < sel.length ; i++){
						arr.push(sel[i].checked)
					}
					//若arr里面存在false，说明有复选框未选，则全选框不勾选，否则全选框勾选
					arr.includes(false) == true ? document.querySelector('#all').checked = false : document.querySelector('#all').checked = true
					//渲染
					render()
				})
			}
			
			
			//若全选框勾选，则所有复选框勾选
			document.querySelector('#all').addEventListener('click', function(e) {
				const sel = document.querySelectorAll('tbody [type=checkbox]')
				for (let i = 0; i < sel.length; i++) {
					sel[i].checked = this.checked
				}
				//渲染
				render()
			})
			
			
			//创建商品数量的增加和减少功能
			const numbers = document.querySelectorAll('[type=number]')
			for(let i = 0 ; i <numbers.length ; i++){
				numbers[i].addEventListener('input',function(e){
					document.querySelectorAll('.all_money')[i].innerText = parseInt(arr[i][2]) * numbers[i].value
					render()
				})
				//商品减少按钮
				numbers[i].previousElementSibling.addEventListener('click',function(e){
					//当商品减少时，若数量在1，则默认值为1，若数量大于1，则数量自减
					numbers[i].value <= 1 ? numbers[i].value = 1 : numbers[i].value--
					//渲染该商品的总金额 ， 总金额 = 数量 * 单价
					document.querySelectorAll('.all_money')[i].innerText = parseInt(arr[i][2]) * numbers[i].value
					render()
				})
				//商品增加按钮
				numbers[i].nextElementSibling.addEventListener('click',function(e){
					//点击时商品增加
					numbers[i].value++
					//渲染该商品的总金额 ， 总金额 = 数量 * 单价
					document.querySelectorAll('.all_money')[i].innerText = parseInt(arr[i][2]) * numbers[i].value
					render()
				})
			}
			
			//删除商品
			const dele = document.querySelectorAll('.delete')
			for(let i = 0 ; i < dele.length ; i++){
				//当点击删除时，弹出提示框
				dele[i].addEventListener('click',function(e){
					let isSure = confirm('您确定要删除吗?')
					//若点击确定，则删除数据已经当前商品
					if(isSure == true){
						localStorage.removeItem(this.dataset.id)
						this.parentNode.parentNode.remove()
						render()
					}
				})
			}
			//清空购物车
			document.querySelector('tfoot a').addEventListener('click',function(e){
				//清空时弹出提示框
				let isClear = confirm('您确定要清空吗？')
				//若同意，测清空商品，并且清空数据
				if(isClear == true){
					localStorage.clear()
					const a = document.querySelectorAll('tbody tr')
					for(let i = 0 ; i < a.length ; i++){
						a[i].remove()
					}
					render()
				}
			})
			
			//结算按钮
			document.querySelector('tfoot .btn').addEventListener('click',function(e){
				//当选择的商品在1件以上，则弹出提示框确定购买吗
				if(document.querySelectorAll('tbody [type="checkbox"]:checked').length >= 1){
					let isBuy = confirm('您确定要购买吗')
					//当点击购买时，清空商品列表和数据
					if(isBuy == true){
						localStorage.clear()
						const a = document.querySelectorAll('tbody tr')
						for(let i = 0 ; i < a.length ; i++){
							a[i].remove()
						}
						//渲染并提示已购买成功
						render()
						alert('购买成功')
					}
				}
				//若没选则商品，则无法购买
				else{
					alert('请选择商品')
					
				}
			})
		</script>
	</body>
</html>
